<template>
    <div class="wrapper" @click="treeBlurHide">
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
            <el-form-item label="角色名称"  style="width:50%"  prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="部门" prop="departmentName" class="width-per50">
                <el-input v-model="ruleForm.departmentName" icon="caret-bottom" placeholder="请选择部门"></el-input>
                <div @click.stop="ruleForm.showTree=!ruleForm.showTree"
                     style="position: absolute;top:0px;left:0;z-index: 10;width: 100%;height: 36px;">
                    <div v-show="ruleForm.showTree" class="department-tree-select" >
                        <el-tree size="small" :data="departmentTree"
                                 :props="departmentTreeProps"
                                 :load="loadNode"
                                 @check-change="handleSearchCheckChange"
                                 node-key="id" ref="ruleFormTree"
                                 check-strictly accordion
                                 highlight-current show-checkbox
                                 lazy>
                        </el-tree>
                    </div>

                </div>

            </el-form-item>
            <el-form-item label="角色等级" prop="level" class="width-per50">
                <el-select v-model="ruleForm.level" placeholder="请选择角色等级" class="width-per100">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="说明"  style="width:50%" >
                <el-input type="textarea" :rows="4" v-model="ruleForm.description"></el-input>
            </el-form-item>
            <div class="bottom-btn-pre">
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button  @click="exitForm('ruleForm')">取消</el-button>
            </div>
        </el-form>
    </div>
</template>


<script>

    import Vue from 'vue'
    import axios from '~/plugins/axios'
    import { mapActions } from 'vuex'
    import { Row,Table, form,button,checkbox,select,Option ,dialog,input,formItem,row,MessageBox,Message,Tree} from 'element-ui'

    Vue.use(Row);
    Vue.use(Table);
    Vue.use(form);
    Vue.use(button);
    Vue.use(checkbox);
    Vue.use(select);
    Vue.use(Option);
    Vue.use(dialog);
    Vue.use(input);
    Vue.use(formItem);
    Vue.use(row);
    Vue.use(Tree);

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;

    export default {
        data() {
            return {
                departmentTree: [],
                departmentTreeProps: {
                    label: 'name',
                    children: 'zones'
                },
                ruleForm: {
                    name: '',
                    level: '',
                    departmentId: '',
                    description: '',
                    departmentName:'',
                    showTree: false
                },

                rules: {
                    name: [
                        { required: true, message: '请输入角色名称', trigger: 'blur' },
                    ],
                    departmentName: [
                        { required: true, message: '请选择部门', trigger: 'blur' }
                    ],
                    level: [
                        { required: true, message: '请选择角色等级', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            ...mapActions([
                'addNewRole'
            ]),
            loadNode(node, resolve) {
                axios.get(process.env.baseUrl + '/department/list', {params:{parentId:node.data.id||0}})
                    .then((ret)=>{
                    return resolve(ret.data.data);
                })
            },
            handleNodeClick(data) {
                return data.id
            },
            handleSearchCheckChange(data,checked) {
                if(checked) {
                    this.ruleForm.departmentId = data.id
                    this.ruleForm.departmentName = data.name
                    this.ruleForm.showTree = !this.ruleForm.showTree
                    this.$refs.ruleFormTree.setCheckedKeys([])
                    this.$refs.ruleFormTree.setChecked(data,true)
                }
            },
            removeEmptyKey(obj) {
                let con = {}
                for (let key in obj) {
                    if (obj.hasOwnProperty(key) && obj[key]){
                        con[key] = obj[key]
                    }
                }
                return con
            },
            submitForm(formName) {
                const _this = this

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addNewRole(_this.removeEmptyKey(_this.ruleForm)).then(() => {
                            _this.$message('新建角色成功');
                            _this.$router.replace('/power/role-management')
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '操作失败'
                        })
                        return false;
                    }
                });
            },
            exitForm(formName) {
                var _this = this;
                this.$confirm('确定退出?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.$refs[formName].resetFields()
                    _this.$router.replace('/power/role-management')
                }).catch(() => {
                });
            },
            treeBlurHide(){
                this.ruleForm.showTree = false
            },
            created (){
                this.ruleForm.departmentId = this.$route.params.depId;
            }
        }
    }
</script>
<style>
    .width-per50{width:50%;}
    .width-per100{width:100%;}
    .bottom-btn-pre{
        width:50%;
        display:table;
        text-align:center;
    }
</style>